<template>
  <header class="bg-black header header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside-md bg-info" :class='leftNav? "nav-xs":""'>
      <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
        <i class="icon-list"></i>
      </a>
      <a class="navbar-brand text-lt">
        <i class="icon-earphones"></i>
        <img src="../../../static/images/logo.png" alt="." class="hide">
        <span class="hidden-nav-xs m-l-sm">Musik</span>
      </a>
      <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
        <i class="icon-settings"></i>
      </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href="javascript:void (0)" data-toggle="class:nav-xs,nav-xs" class="text-muted" @click='leftNavChange'>
        <i class="fa fa-indent text "></i>
        <i class="fa fa-dedent text-active"></i>
      </a>
    </li>
  </ul>
    <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
      <div class="form-group">
        <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
          <input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
        </div>
      </div>
    </form>
    <div class="navbar-right ">
      <ul class="nav navbar-nav m-n hidden-xs nav-user user">

        <li class="dropdown">
          <a class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="../../../static/images/m0.jpg"  alt="...">
              </span>拆穿
           <!-- {{PersonalInfo.profile.nickname}}--> <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <li>
              <span class="arrow top"></span>
              <a>Settings</a>
            </li>
            <li>
              <a>Profile</a>
            </li>
            <li>
              <a >
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a >Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a data-toggle="ajaxModal">Logout</a>
            </li>
          </ul>
        </li>
        <li class="hidden-xs">
          <a class="dropdown-toggle lt list-icon" data-toggle="dropdown">
            <div class='text-danger'><i class=" icon-power"></i></div>
          </a>
          <section class="dropdown-menu aside-xl animated fadeInUp">
            <section class="panel bg-white">
              <div class="panel-heading b-light bg-light">
                <strong>You have <span class="count" style="display: inline;">3</span> notifications</strong>
              </div>
              <div class="list-group list-group-alt"><a class="media list-group-item" style="display: block;"><span class="pull-left thumb-sm text-center"><i class="fa fa-envelope-o fa-2x text-success"></i></span><span class="media-body block m-b-none">Sophi sent you a email<br><small class="text-muted">1 minutes ago</small></span></a>
                <a class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="../../../static/images/a0.png" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/9/24/d9a1d741ea198ce9f2e3d9bd8a3196f1/images/a0.png" alt="..." class="img-circle">
                    </span>
                  <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                </a>
                <a class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                </a>
              </div>
              <div class="panel-footer text-sm">
                <a class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
              </div>
            </section>
          </section>
        </li>
      </ul>
    </div>
  </header>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'

    export default {
        data() {
            return {}
        },
        ready() {

        },
      computed: mapGetters([  //变量
        'leftNav',
        'PersonalInfo'
      ]),
      methods: mapActions([  //方法
        'leftNavChange'
      ])
    }
</script>
<style>

</style>
